<template>
  <div
    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
  >
    <div class="bg-white rounded-lg w-full max-w-[300px] pb-[24px]">
      <p
        class="mb-[24px] h-[44px] flex-shrink-0 border-b-[1px] border-color-m2 border-opacity-[0.06] px-[24px] text-center text-[16px] leading-[44px]"
      >
        {{ $t("message.updatePassword") }}
      </p>
      <form @submit.prevent="handleSubmit" class="px-[24px] text-[14px]">
        <div class="space-y-4">
          <div class="relative">
            <input
              class="w-full p-2 bg-gray-100 rounded-md pr-10 outline-none"
              required
              :type="showOldPassword ? 'text' : 'password'"
              :placeholder="$t('message.oldPassword')"
              :class="
                oldPasswordErrorTip &&
                'border-[1px] border-[#FF4D4F] bg-[#fff1f0] placeholder:text-[#FF4D4F]'
              "
              v-model="oldPassword"
              @blur="validateOldPassword"
            />
            <button
              type="button"
              @click="showOldPassword = !showOldPassword"
              class="absolute right-2 top-1/2 transform -translate-y-1/2"
            >
              <span
                class="iconfont text-color-t3"
                :class="[
                  showOldPassword ? 'icon-appear_icon' : 'icon-hide_icon',
                  oldPasswordErrorTip && 'text-[#FF4D4F]',
                ]"
              ></span>
            </button>
            <p class="absolute text-[#FF4D4F] text-[12px]">
              {{ oldPasswordErrorTip }}
            </p>
          </div>
          <div class="relative">
            <input
              class="w-full p-2 bg-gray-100 rounded-md pr-10 outline-none"
              required
              :placeholder="$t('message.newPassword')"
              :type="showNewPassword ? 'text' : 'password'"
              :class="
                newPasswordErrorTip &&
                'border-[1px] border-[#FF4D4F] bg-[#fff1f0] placeholder:text-[#FF4D4F]'
              "
              v-model="newPassword"
              @blur="validateNewPassword"
            />
            <button
              type="button"
              @click="showNewPassword = !showNewPassword"
              class="absolute right-2 top-1/2 transform -translate-y-1/2"
            >
              <span
                class="iconfont text-color-t3"
                :class="[
                  showNewPassword ? 'icon-appear_icon' : 'icon-hide_icon',
                  newPasswordErrorTip && 'text-[#FF4D4F]',
                ]"
              ></span>
            </button>
            <p class="absolute text-[#FF4D4F] text-[12px]">
              {{ newPasswordErrorTip }}
            </p>
          </div>
          <div class="relative">
            <input
              class="w-full p-2 bg-gray-100 rounded-md pr-10 outline-none"
              required
              :type="showConfirmPassword ? 'text' : 'password'"
              :placeholder="$t('message.confirmPassword')"
              :class="
                confirmPasswordErrorTip &&
                'border-[1px] border-[#FF4D4F] bg-[#fff1f0] placeholder:text-[#FF4D4F]'
              "
              v-model="confirmPassword"
              @blur="validateConfirmPassword"
            />
            <button
              type="button"
              @click="showConfirmPassword = !showConfirmPassword"
              class="absolute right-2 top-1/2 transform -translate-y-1/2"
            >
              <span
                class="iconfont text-color-t3"
                :class="[
                  showConfirmPassword ? 'icon-appear_icon' : 'icon-hide_icon',
                  confirmPasswordErrorTip && 'text-[#FF4D4F]',
                ]"
              ></span>
            </button>
            <p class="absolute text-[#FF4D4F] text-[12px]">
              {{ confirmPasswordErrorTip }}
            </p>
          </div>
        </div>
        <div class="mt-6 flex justify-center space-x-4">
          <button
            type="button"
            @click="$emit('close')"
            class="w-[120px] px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300"
          >
            {{ $t("message.cancel") }}
          </button>
          <button
            type="submit"
            class="w-[120px] px-4 py-2 bg-blue-500 text-white rounded-md"
            :class="isOk ? 'hover:bg-blue-600' : 'cursor-not-allowed'"
            :disabled="!isOk"
          >
            {{ $t("message.submit") }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const emits = defineEmits(["close", "passwordChanged"]);
const oldPassword = ref("");
const newPassword = ref("");
const confirmPassword = ref("");
const showOldPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);

const oldPasswordErrorTip = ref("");
const newPasswordErrorTip = ref("");
const confirmPasswordErrorTip = ref("");
const validate = (val) => {
  if (!val.value) {
    return "密码不能为空";
  }
  if (val.value.length < 6) {
    return "密码长度不能小于6位";
  }
  return "";
};

const validateOldPassword = () => {
  oldPasswordErrorTip.value = validate(oldPassword);
};
const validateNewPassword = () => {
  newPasswordErrorTip.value = validate(newPassword);
};
const validateConfirmPassword = () => {
  if (newPassword.value !== confirmPassword.value) {
    confirmPasswordErrorTip.value = "两次输入的密码不一致";
  } else {
    confirmPasswordErrorTip.value = "";
  }
};

const isOk = computed(() => {
  return (
    !oldPasswordErrorTip.value &&
    !newPasswordErrorTip.value &&
    !confirmPasswordErrorTip.value &&
    oldPassword.value &&
    newPassword.value &&
    confirmPassword.value
  );
});

const handleSubmit = () => {
  emits("passwordChanged", {
    password: oldPassword.value,
    newPassword: newPassword.value,
  });
  // emit("close");
};
</script>
<style lang="scss" scoped></style>
